<template>
    <div class="app-container">
        <div>
            <el-form :model="form" ref="form" label-width="130px" :inline="true">
                <el-row>
                    <el-col :span="24" class="alignRight marginBottom">
                        <el-button type="primary" @click="toRoutes('bankCardAdd')">添加银行卡</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv">
            <el-table v-loading="tableLoading" :data="tableData" border style="width: 100%" ref="tableData">
                <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="type" label="类型">
                    <template slot-scope="scope">
                        {{scope.row.type | accountType}}
                    </template>
                </el-table-column>
                <el-table-column prop="bankName" label="银行名称"></el-table-column>
                <el-table-column prop="bankAccount" label="银行卡号"></el-table-column>
                <el-table-column prop="bankAccountName" label="户名/企业账户名称">
                </el-table-column>
                <el-table-column prop="bankBranchName" label="开户行支行"></el-table-column>
                <el-table-column prop="mobileId" label="手机号码"></el-table-column>
                <el-table-column prop="createdAt" label="绑定时间"></el-table-column>
                <el-table-column prop="auditStatus" label="审核状态">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.type=='0'">
                                {{scope.row.approvedStatus | auditStatusType}}
                            </span>
                            <span  v-if="scope.row.type=='1'">
                                {{scope.row.auditStatus | auditStatusType}}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="审核意见"></el-table-column>
                <el-table-column prop="approvedTime" label="审核通过时间"></el-table-column>
                <el-table-column label="操作" width="160" fixed="right">
                    <template slot-scope="scope">
                        <!-- 回填金额暂未提供接口 -->
                        <!-- v-if="scope.row.type=='0'&&scope.row.approvedStatus=='0'" -->
                        <el-button
                            v-if="scope.row.type=='0'&&scope.row.approvedStatus=='0'"
                            size="small"
                            type="text"
                            @click="moneyFn(scope.row)"
                        >回填打款金额</el-button>
                        <!-- 对公账户 -->
                        <!-- <el-button
                            v-if="scope.row.type=='0'&&scope.row.auditStatusType=='1'"
                            size="small"
                            type="text"
                            @click="romoveBind(scope.row.cardId)"
                        >解除绑定</el-button> -->
                        <!-- 对私账户 -->
                        <!-- <el-button
                            v-if="scope.row.type=='1'&&scope.row.auditStatus=='1'"
                            size="small"
                            type="text"
                            @click="romoveBind(scope.row.cardId)"
                        >解除绑定</el-button> -->
                        <el-button
                            v-if="scope.row.auditStatus=='2'"
                            size="small"
                            type="text"
                            @click="toRoutes('bankCardEdit',scope.row.cardId)"
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 回填打款金额弹窗 -->
            <el-dialog title="回填打款金额" :visible.sync="dialogFormVisible" width="468px">
                <el-form
                    :model="dialogForm"
                    ref="dialogForm"
                    label-width="140px"
                    onSubmit="return false"
                >
                    <el-form-item label="您收到的打款金额">
                        <el-input v-model="dialogForm.amount" style="width:160px" placeholder="请输入打款金额"  @blur="numFilter(dialogForm.amount)" ></el-input>
                    </el-form-item>
                    <p class="titlep">回填打款金额即可完成认证(只能填0.01-0.99之间的数，超出范围默认为0.01)</p>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="sumbitRow()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import bankCard from "@/api/bankCard";
import commonFn from "@/utils/common";
export default {
    name: "bankCardIndex",
    data() {
        return {
            tableLoading:true,
            // table列表
            tableData: [],
            // form表单
            form: {
            },
            dates: null,
            dialogForm:{
                cardId:null,
                amount:null,
                legalRepName:null,
                orgCode:null,
                name:null
            },
            dialogFormVisible:false,
        };
    },
    watch:{
        // 'dialogForm.amount':{
        //     handler(newData,oldData) {
        //         // let reg = /^0[1-9]$|^[1-9][0-9]?$|^00?\.(?:0[1-9]|[1-9][0-9]?)$|^(?:0[1-9]|[1-9][0-9]?)\.[0-9]$/
        //         // console.log(newData)
        //         // if(!reg.test(newData)){
        //         //     this.dialogForm.amount = Number(0.01)
        //         // }
        //         if(Number(newData)<=0||Number(newData)>=1){
        //             console.log("---")
        //             this.dialogForm.amount = null
        //         }else{
        //             this.dialogForm.amount = Number(this.dialogForm.amount).toFixed(2) 
        //         }
        //     },
        //     deep: true
        // }
    },
    // 过滤器
    filters: {
        //账户类型
        accountType(e){
            switch(e){
                case "0":
                    return "对公账户"
                case "1":
                    return "对私账户"
            }
        },
        // 审核状态
        auditStatusType(e){
            switch(e){
                case "0":
                    return "待审核"
                case "1":
                    return "审核通过"
                case "2":
                    return "审核驳回"
            }
        },
    },
    inject: ["reload"],
    mounted() {
        // this.hospitalNameList();
        // this.form.id = String(this.$store.state.user.hospitalId)
        this.getList(this.form);
    },
    methods: {
        // 按钮权限
        hasPermission(e) {
            return window.helper.hasPermission(e);
        },
        // 主页列表
        getList(e) {
            bankCard
                .getList(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData;
                        // this.page_totals = resData.count;
                        // console.log(res);
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // 查询
        handleSearch() {
            this.form.pageNum = 1
            if (this.dates != null) {
                if (this.dates.length > 0) {
                    this.form.beginCreateDate = this.dates[0];
                    this.form.endCreateDate = this.dates[1];
                } else {
                    this.form.beginCreateDate = null;
                    this.form.endCreateDate = null;
                }
            } else {
                this.form.beginCreateDate = null;
                this.form.endCreateDate = null;
            }
            this.getList(this.form);
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = {
                name: e,
                query: { userId: JSON.stringify(userId) }
            };
            this.$router.push(route);
        },
        // 解除绑定
        romoveBind(e){
            let defineFn = () => {
                let datas = { id: String(e) };
                // console.log(datas)
                // this.succStatus("确定成功");
                bankCard
                    .romoveBind(datas)
                    .then(res => {
                        // console.log(!res.data.code)
                        if (!res.data.code) {
                            this.succStatus("解除绑定成功");
                            this.reload();
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
                    .catch(err => {
                        this.errorStatus(err);
                    });
            };
            let confirmDatas = {
                desc: "是否确认解除绑定此银行卡？",
                title: "提示",
                confirmBtnTxt: "确定",
                cancelBtnTxt: "取消",
                fn: defineFn,
                catchInfo: "已取消"
            };
            this.eleConfirm(confirmDatas);
        },
        // 0到1的正则校验
        numFilter(newData){
            // let res = /^[0-1]$|^0\.[0-2]+$/
            // if(!res.test(value)){
            //     this.dialogForm.money = 0
            // }
            // this.dialogForm.money = Number(this.dialogForm.money).toFixed(2)
            if(Number(newData)<=0||Number(newData)>=1){
                this.dialogForm.amount = 0.01
            }else{
                this.dialogForm.amount = Number(this.dialogForm.amount).toFixed(2) 
            }
        },
        //回填打款金额
        moneyFn(row) {
            this.dialogFormVisible = true;
            // this.dialogForm.cardId = id
            // this.dialogForm.amount = null
            let td = this.dialogForm
            td.cardId = row.cardId
            td.amount = 0.01
            td.legalRepName = row.legalRepName
            td.orgCode = row.orgCode
            td.name = row.name
        },
        // 取消弹窗
        cancel() {
            this.dialogFormVisible = false;
        },
        //编辑框确定事件
        sumbitRow() {
            let datas = { ...this.dialogForm };
            datas.amount = String(datas.amount)
            if(this.dialogForm.amount<=0||this.dialogForm.amount>=1){
                this.errorStatus("回填金额只能为0.01-0.99之间的数")
            }else{
                this.dialogFormVisible = false;
            }
            // console.log(datas)
            bankCard
                .moneyPost(datas)
                .then(res => {
                    if (!res.data.code) {
                        this.reload();
                        this.succStatus("操作成功");
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        //confirm框
        eleConfirm(e) {
            this.$confirm(e.desc, e.title, {
                confirmButtonText: e.confirmBtnTxt,
                cancelButtonText: e.cancelBtnTxt,
                type: "warning"
            })
                .then(() => {
                    e.fn();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: e.catchInfo
                    });
                });
        },
        // 每页显示条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        // 当前页
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.exportButton {
    text-align: right;
}
.marginBottom{margin-bottom:20px;}
.titlep{font-size: 12px;color: #606266;margin-top: 8px;text-align: center}
</style>